<!-- 使用方式
	<ct-area :placeholder="placeholder" :disabled="disabled" :show="show"}"></ct-area> -->
<template>
	<view class="">
		<view class="w100 c-r-l o-p" :style="[boxStyle,border]">
			<textarea @input="input" v-model="content" class="c-t65 w100" :maxlength="maxlength" :style="[height]" :cursor-spacing="10" :disabled="disabled" :placeholder="placeholder"></textarea>
			<view v-if="show" class="c-tr c-t6 c-color-g">{{cursor}}/{{maxlength}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cursor: 0,
				content:null
			}
		},
		props: {
			height: {
				type: Object,
				default: function () {
					return {height: '100rpx'}
				}
			},
			boxStyle:{
				type: Object,
				default: function () {
					return {
						'background-color':'#EAEAEA'
					}
				}
				
			},
			border: {
				type: Object,
				default: function () {
					return {
						'border': '1px solid #EAEAEA',
						'box-sizing': 'border-box'
					}
				}
			},
			maxlength: {
				type: Number,
				default: 140
			},
			placeholder: {
				type: String,
				default: '请输入投诉建议'
			},
			disabled: {
				type:Boolean,
				default:false
			},
			show: {
				type:Boolean,
				default:true
			},
			f_content: {
				type: String
			}
		},
		created() {
			this.content = this.f_content;
			this.cursor = this.f_content?this.f_content.length:0
		},
		methods:{
			input(e) {
				if(this.cursor>this.maxlength) {
					this.$Function.Toast('最多可以输入225个字')
				}else{
					this.cursor = e.detail.cursor;
				}
			}
		}
	}
</script>

<style>
</style>
